<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8">
    <title>DI上报页面</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../../../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../../../static/udi/dist/css/layui.css" th:href="@{/udi/dist/css/layui.css}" rel="stylesheet"/>
    <link href="../../../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>

    <link href="../../../static/ajax/libs/bootstrap-table/bootstrap-table.min.css" th:href="@{/ajax/libs/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet"/>
    <link href="../../../static/css/animate.css" th:href="@{/css/animate.css}" rel="stylesheet"/>
    <link href="../../../static/css/style.css" th:href="@{/css/style.css}" rel="stylesheet"/>
    <link href="../../../static/udi/css/jt-ui.css" th:href="@{/udi/css/jt-ui.css}" rel="stylesheet"/>
    <link href="../../../static/ajax/libs/jquery-layout/jquery.layout-latest.css" th:href="@{/ajax/libs/jquery-layout/jquery.layout-latest.css}" rel="stylesheet"/>

    <th:block th:include="include :: header('DI上报')" />
    <style>
        .span {
            position:relative;
            padding:5px;
        }
        .tip {
            display:block;
            background:#f00;
            border-radius:50%;
            width:8px;
            height:8px;
            top:0px;
            right:0px;
            position:absolute;
        }
    </style>
</head>
<body>
<div class="container-fluid gray-bg">
    <div class="container-div">
        <div class="row">
            <div class="col-sm-12 search-collapse">
                <form id="form_diup_mana">
                    <div class="select-list">
                        <ul>
                            <li>
                                最小销售单元产品标识：<input autocomplete="off" type="text" name="ZXXSDYCPBS"/>
                                <input id="hide" hidden>
                            </li>
                            <li>
                                产品名称/通用名称：<input id="cpmctymc" autocomplete="off" type="text" name="CPMCTYMC"/>
                                <input id="hide" hidden>
                            </li>
                            <li>
                                规格型号：
                                <select name="ggxh" id="ggxh">
                                   <option value="">所有</option>
                                </select>
                            </li>
                            <li>
                                申报状态：
                                <select name="statu" th:with="type=${@dict.getType('di_upload_status')}">
                                    <option value="">所有</option>
                                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                                </select>
                            </li>
                        </ul>
                        <ul>
                            <li>
                                <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                                <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>
            <div class="col-sm-12 select-table table-striped">
                <div class="btn-group-sm  col-sm-12" id="toolbar" role="group">
                    <a class="btn btn-success btn-sm" onclick="$.operate.addTab()" shiro:hasPermission="upload:diup:add">
                        <i class="fa fa-plus"></i> 新增
                    </a>
                    <a class="btn btn-primary single disabled" onclick="$.operate.edit()" shiro:hasPermission="upload:diup:edit">
                        <i class="fa fa-edit"></i> 修改
                    </a>
                    <a class="btn btn-danger multiple disabled" onclick="$.operate.removeAll()" shiro:hasPermission="upload:diup:remove">
                        <i class="fa fa-trash"></i> 删除
                    </a>
                    <a class="btn btn-warning"  onclick="$.table.importExcel()" shiro:hasPermission="upload:diup:import">
                        <i class="fa fa-download"></i> DI关联信息批量导入
                    </a>
                    <!--<a class="btn btn-warning"  onclick="$.table.importExcel()">
                        <i class="fa fa-upload"></i> DI关联信息批量导出
                    </a>-->
                    <a class="btn btn-success btn-sm multiple disabled" onclick="$.operate.checkAll_diup()" shiro:hasPermission="upload:diup:check">
                        <i class="fa fa-check-circle-o"></i> 填报验证
                    </a>
                    <a class="btn btn-success btn-sm multiple disabled" onclick="$.operate.checkAll_diup()" shiro:hasPermission="upload:diup:check">
                        <i class="fa fa-check-circle"></i> 提交
                    </a>
                </div>
                <div>
                    <table id="bootstrap-table"></table>
                </div>
            </div>
        </div>
    </div>
</div>
<!--导入数据-->
<script id="importTpl" type="text/template">
    <form enctype="multipart/form-data" class="mt20 mb10">
        <div class="col-xs-offset-1">
            <input type="file" id="file" name="file"/>
            <!--<div class="mt10 pt5">
                <a onclick="$.table.importTemplate()" class="btn btn-default btn-xs"><i class="fa fa-file-excel-o"></i> 下载模板</a>
            </div>-->
            <font color="red" class="pull-left mt10">
                提示：仅允许导入“xls”或“xlsx”格式文件！
            </font>
        </div>
    </form>
</script>

<!-- 全局js -->
<th:block th:include="include :: footer" />
<script src="../../../static/js/jquery.min.js"></script>
<script src="../../../static/js/bootstrap.min.js"></script>
<script src="../../../static/ajax/libs/typeahead/bootstrap3-typeahead.min.js"></script>
<script src="../../../static/udi/dist/layui.js"></script>
<script src="../../../static/ajax/libs/jquery-layout/jquery.layout-latest.js"></script>
<script src="../../../static/ajax/libs/bootstrap-table/bootstrap-table.min.js"></script>
<script src="../../../static/ajax/libs/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="../../../static/udi/js/jt-ui.js"></script>
<script th:inline="javascript">

    var prefix ="/upload/di" ;
    var datas = [[${@dict.getType('di_upload_status')}]];
    $(function() {
        var options = {
            url: prefix + "/list",
            createUrl: prefix + "/addView",
            detailUrl: prefix + "/detailView/{id}",
            updateUrl: prefix + "/updateView/{id}",
            removeUrl: prefix + "/remove",
            importUrl: prefix + "/import",
            checkUrl: prefix + "/check",
            importTemplateUrl:prefix + "/importTemplate",
            sortName: "di_identity_id",
            modalName: "DI关联关系",
            pageSize: 10,
            pageNumber: 1,
            pageList: [10,20,30,100],
            columns: [
                {checkbox: true},
                {field: 'di_identity_id', title: '序号', sortable: true},
                {title: '操作', align: 'center',
                    formatter: function(value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-info btn-xs" href="javascript:void(0)" onclick="$.operate.detail(\'' + row.di_identity_id + '\')">&nbsp;详情</a>');
                        return actions.join('');
                    }
                },
                {field: 'statu', title: '状态',
                    formatter: function(value, row, index) {
                        return $.table.selectDictLabel(datas, value);
                    }},
                {field: 'zxxsdycpbs', title: '最小销售单元产品标识'},
                {field: 'cpmctymc', title: '产品标识编码体系名称'},
                {field: 'zxxsdyzsydydsl', title: '最小销售单元使用数量'},
                {field: 'cpmctymc', title: '产品名称/通用名称'},
                {field: 'ggxh', title: '规格型号'},
                {field: 'addtime', title: '添加时间', sortable: true}
                ]
        };
        $.table.init(options);

        $("#cpmctymc").typeahead({
            minLength: 5,//键入字数多少开始查询补全
            showHintOnFocus: false,//将显示所有匹配项
            fitToElement: true,//选项框宽度与输入框一致
            items:5,//下拉数
            delay: 500,//延迟时间
            source: function (query, process) {//指定数据源，query代表输入框中你的输入值（即查询值）,process回调函数
                var arr=[];
                $.ajax({
                    url: prefix + "/dropdown",
                    type: "post",
                    async:false,
                    dataType:"json",
                    data: {data:query},
                    success: function (data) {//data表示查询结果，自动补全的数
                        if(data.code === 1){
                            $("#hide").attr("value",JSON.stringify(data.data));
                            $.each(data.data,function (i,o){
                                arr.push(o.cpmc);
                            })
                        }else {
                            layer.msg(data.data,{icon:6,time:1000});
                        }
                    },
                });
                process(Array.from(new Set(arr)));//去重回显
            },
            updater: function (obj){
                return obj;
            },
            afterSelect:function (obj) {
                var data = JSON.parse($("#hide").val());
                $("#ggxh").empty();
                $("#ggxh").append('<option selected value="">--请选择--</option>');
                $.each(data,function (i,o) {
                    if(obj === o.cpmc){
                        $("#ggxh").append('<option value="'+o.ggxh+'">'+o.ggxh+'</option>');
                    }
                })
            }
        });
    });
</script>
</body>
</html>